<script setup lang="ts">
  import { VueDraggable } from 'vue-draggable-plus'
  import { ref } from 'vue'
  import _ from 'lodash'
  // 高亮下标
  const activeIndex = ref(-1)
  // 列表数据
  const list = ref([
    { id: 3, name: '张三' },
    { id: 4, name: '李四' },
    { id: 5, name: '王五' },
    { id: 6, name: '赵六' },
    { id: 7, name: '田七' },
  ])

  //   // 拖拽开始
  const onDragStart = (index: number) => {
    // 更新下标
    activeIndex.value = index
  }

  // const onDragOver = (index: number) => {
  //   // 提取数据
  //   const draggingItem = list.value.splice(activeIndex.value, 1)
  //   // 添加数据
  //   list.value.splice(index, 0, ...draggingItem)
  //   // 更新下标
  //   activeIndex.value = index
  // }

  //   const onDragEnd = () => {
  //     // 恢复下标
  //     activeIndex.value = -1
  //   }

  const onDragOver = _.throttle(function th(index) {
    console.log(index)
    const listSplice = list.value.splice(activeIndex.value, 1)
    list.value.splice(index, 0, ...listSplice)
    activeIndex.value = index
  }, 120)

  //   const onDragOver = _.throttle(function (index) {
  //     console.log(index)
  //     const listSplice = list.value.splice(activeIndex.value, 1)
  //     list.value.splice(index, 0, ...listSplice)
  //     activeIndex.value = index
  //   }, 2000)

  const onDragEnd = () => {
    activeIndex.value = -1
  }
  const onClick = _.throttle((number) => {
    console.log(number)
  }, 2000)

  // 列表数据
  const list2 = ref([
    { id: 3, name: '开发任务A' },
    { id: 4, name: '开发任务B' },
    { id: 5, name: '开发任务C' },
    { id: 6, name: '开发任务D' },
    { id: 7, name: '开发任务E' },
  ])

  const list3 = ref([
    { id: 11, name: '工作1' },
    { id: 12, name: '工作2' },
    { id: 13, name: '工作3' },
  ])
</script>

<template>
  <button @click="onClick(1)">点击</button>
  <div class="list">
    <div
      class="item"
      v-for="(item, index) in list"
      :key="item.id"
      :draggable="true"
      @dragstart="onDragStart(index)"
      @dragover="onDragOver(index)"
      @dragend="onDragEnd"
    >
      {{ item.name }}
    </div>
  </div>
  <pre class="data">{{ list }}</pre>
  <VueDraggable ref="el" v-model="list">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
  <div class="group">
    <!-- 数据编组 -->
    <h1>数据编组</h1>
    <VueDraggable ref="el" v-model="list2" class="list" :group="'group'">
      <div v-for="item in list2" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable ref="el" v-model="list3" class="list" :group="'group'">
      <div v-for="item in list3" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
</template>


<style scoped lang="scss">
  .list {
    width: 500px;
    border: 1px solid #000;
    .item {
      box-sizing: border-box;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      // 隔行变色
      &:nth-child(even) {
        background: #c7edcc;
      }
      &:nth-child(odd) {
        background: pink;
      }
    }
  }

  .data {
    box-sizing: border-box;
    padding: 10px;
    width: 500px;
    border: 1px solid #000;
    font-family: serif;
  }
</style>
